<template>
	<view class="page">
		<navbar backIconName="arrow-left" title="我的心声" :titleStyle="titleStyle"></navbar>
		<scroll-view class="scroll-view_H" scroll-y="true">
			<view :style="{height:statusHeight+'px'}"></view>

			<view class="news-item">
				<view class="staff-card">
					<view class="left">
						<view class="top">
							<text style="font-size: 30rpx;color: #323232;font-weight: bold;margin-right: 20rpx;">
								{{innermostThoughts.contacts +'反映'+innermostThoughts.addressName+innermostThoughts.departmentName+'的心声'}}
							</text>
						</view>
						<view class="mid">
							<view style="display: flex;align-items: center;flex: 1;">
								<text
									style="font-size: 26rpx;color: #666;margin-right: 20rpx;">{{innermostThoughts.addressName}}</text>
								<text style="font-size: 26rpx;color: #666;">{{innermostThoughts.departmentName}}</text>
							</view>
							<text style="font-size: 26rpx;color: #666;">{{innermostThoughts.typeName}}</text>
						</view>
						<view class="bottom">
							<text class="status"
								v-if="innermostThoughts.status == '0' || innermostThoughts.status == '1'"
								style="background-color: rgba(255, 192, 1, 1);">待处理</text>
							<text class="status" v-if="innermostThoughts.status == '2'"
								style="background-color: rgba(54, 185, 0, 1);">已处理</text>
							<text style="font-size: 26rpx;color: #666;">{{innermostThoughts.createTime}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="inCompany-task">
				<view class="task-item">
					<view class="left">
						<view class="top">
							<text style="font-size: 28rpx;color: #1169DB;font-weight: bold;">基本信息</text>
						</view>
						<u-line></u-line>
						<view class="top" style="padding-top: 20rpx;">
							<text class="label-content" style="width: 90px;">反映内容</text>
							<text
								style="flex: 1; font-size: 28rpx;color: #666666;">{{innermostThoughts.reflectComment || ''}}</text>
						</view>
					</view>
				</view>
			</view>

			<template v-if="innermostThoughts.status == '2'">
				<view class="inCompany-task" style="padding: 0px 20rpx;">
					<view class="task-item">
						<view class="left">
							<view class="top">
								<text
									style="font-size: 28rpx;color: #1169DB;font-weight: bold;">{{innermostThoughts.pushDepartmentName +'已答复'}}</text>
							</view>
							<u-line></u-line>
							<view style="padding-top: 20rpx;padding-bottom: 20rpx;">
								<text style="font-size: 28rpx;color: #323232;">{{innermostThoughts.reply || '-'}}</text>
							</view>
							<u-line></u-line>
							<view style="padding-top: 20rpx;">
								<text
									style="font-size: 26rpx;color: #666666;">{{'答复时间：'+innermostThoughts.replyTime}}</text>
							</view>
						</view>

					</view>

				</view>


				<view class="inCompany-task" v-if="fileList.length > 0">
					<view class="task-item">
						<view class="left">
							<view class="top">
								<text style="font-size: 28rpx;color: #1169DB;font-weight: bold;">附件</text>
							</view>
							<u-line></u-line>
							<view v-for="(item,index) in fileList" :key="index"
								style="display: flex;flex-direction: column;">
								<view class="top" style="padding-top: 20rpx;">
									<text class="label-content" style="flex: 1;">{{item.fileName || ''}}</text>
									<view :data-params="item" @click="handlePreview">
										<u-icon name="eye" size="21"></u-icon>
									</view>
									<view style="margin-left: 20rpx;" :data-params="item" @click="handleDownload">
										<u-icon name="download" size="21"></u-icon>
									</view>
								</view>
								<u-line></u-line>
							</view>
						</view>

					</view>

				</view>
			</template>





		</scroll-view>

		<!-- loading -->
		<u-overlay :show="showLoading" :opacity="0.8">
			<view class="warp">
				<text style="font-size: 28rpx;color: #fff;">{{loadingTips}}</text>
			</view>
		</u-overlay>

	</view>
</template>

<script>
	import {
		getHeartDetails,
	} from '@/api/pagesMall'
	let App = getApp();
	export default {
		components: {},
		data() {
			return {
				showLoading: false,
				loadingTips: '加载中...',
				statusHeight: 44 + App.globalData.statusBarHeight,
				titleStyle: {
					color: "#ffffff",
					fontWeight: "bold",
					fontSize: "18px"
				},
				fileList: [], //附件
				innermostThoughts: null,
			};
		},
		onLoad(options) {
			this.getDetails(options.thoughtsNo)
		},
		methods: {
			/* 获取详情 */
			getDetails(thoughtsNo) {
				getHeartDetails(thoughtsNo).then(res => {
					console.log(res, "***************企业心声详情**************")
					if (res.data.replyAttachmentVoList && res.data.replyAttachmentVoList.length > 0) {
						this.fileList = res.data.replyAttachmentVoList || []
					}
					this.innermostThoughts = res.data.innermostThoughts
				}).catch(res => {

				});
			},
			/* 预览 */
			handlePreview(e) {
				this.loadingTips = "加载中..."
				this.showLoading = true
				uni.downloadFile({
					url: e.currentTarget.dataset.params.fileUrl, //文件地址链接
					method: 'GET',
					success: (data) => {
						console.log(data);
						if (data.statusCode === 200) {
							console.log(data);
							//打开文档查看
							uni.openDocument({
								filePath: data.tempFilePath,
								success: (res) => {
									this.showLoading = false
								},
								fail: (err) => {
									this.showLoading = false
									return uni.$u.toast('预览失败')
								}
							});
						} else {
							this.showLoading = false
							return uni.$u.toast('预览失败')
						}
					},
					fail: (err) => {
						console.log(err)
						this.showLoading = false
						return uni.$u.toast('预览失败')
					},
				});
			},
			/* 下载附件 */
			handleDownload(e) {
				this.loadingTips = "下载中..."
				this.showLoading = true
				uni.downloadFile({
					url: e.currentTarget.dataset.params.fileUrl, //文件地址链接
					method: 'GET',
					success: (data) => {
						console.log(data);
						if (data.statusCode === 200) {
							this.showLoading = false
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: (res) => {
									uni.$u.toast('下载成功')
								},
								fail: (err) => {
									uni.$u.toast('下载失败')
								}
							});
						} else {
							this.showLoading = false
							return uni.$u.toast('下载失败')
						}
					},
					fail: (err) => {
						this.showLoading = false
						return uni.$u.toast('下载失败')
					},
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.news-item {
		display: flex;
		flex-direction: column;

		.staff-card {
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin: 10rpx 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;

				.mid {
					margin: 20rpx 0rpx;
					display: flex;
					align-items: center;
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.status {
						font-size: 24rpx;
						color: #fff;
						padding: 4rpx 10rpx;
						border-radius: 6rpx;
						background-color: #4F79DC;
					}
				}
			}
		}
	}

	.scroll-view_H {
		width: 100%;
		height: 100%;

		.submit-content {
			padding: 30rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.other-staff {

			height: 80rpx;
			border: 1px dashed #1169DB;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #1169DB;
			font-weight: bold;
			margin: 0px 20rpx;
			border-radius: 6rpx;
		}

		.inCompany-task {
			display: flex;
			flex-direction: column;
			padding: 20rpx;


			.task-item {
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				background-color: #fff;
				border-radius: 12rpx;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;

					.top {
						display: flex;
						padding-bottom: 20rpx;

						.label-content {
							width: 250rpx;
							font-size: 28rpx;
							color: #323232;
							font-weight: bold;
						}
					}
				}
			}
		}



	}
</style>